<template>
  <div class="editDept">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="390px"
               title="添加部门">
      <el-form :model="editData" size="mini" status-icon :rules="rules" ref="editData" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="部门名称：" prop="deptName" required>
          <el-input v-model="editData.deptName" style="width: 75%;"></el-input>
        </el-form-item>
        <el-form-item label="所属部门：" prop="pId">
          <el-select v-model="editData.pId" placeholder="请选择" @change="changeDept" style="width: 75%;">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.deptName"
              :value="item.id">
              <span style="float: left">{{ item.deptName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptLevel }}级</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门备注：" >
          <el-input v-model="editData.remark" style="width: 75%;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('editData')">提交</el-button>
          <el-button @click="resetForm('editData')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  export default {
    name: 'addDept',
    props: ['dataDetail'],
    data() {
      var notEmpty = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        } else {
          callback();
        }
      };

      return {
        centerDialogVisible: false,
        clickModalHide: false,
        editData: {
          pId: "",
          remark: "",
          deptName: "",
          id: "",
          deptLevel: "1",
          createUser: ""
        },
        deptList:[],
        deptMap:{},
        rules: {
          deptName: [
            {validator: notEmpty, trigger: 'blur'}
          ]
        },
        count: 0,
      }
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("refreshDeptAgain",function () {
        self.getSelectDeptList();
      });
      self.getSelectDeptList();
    },

    methods: {
      getSelectDeptList() {
        let self = this;
        self.$http({
          url: "/autoMonitor/dept/queryDeptList",
          method: "post",
          params:{convertChild:false}
        }).then(resp => {
          if (resp.success) {
            self.deptList = resp.result;
            for(let dept of resp.result){
              self.deptMap[dept.id] = dept.deptLevel;
            }
          }
        });
      },

      changeDept(dept){
         let deptLevel = this.deptMap[dept];
         if(deptLevel){
            this.editData.deptLevel = parseInt(deptLevel)+1+"";
         }
      },

      operateAddDept() {
        let self = this;
        let user = getToken();
        user = JSON.parse(user);
        self.editData.createUser = user.userAccount;
        if (this.count == 0) {
          self.$http({
            url: "/autoMonitor/dept/insertDept",
            method: "post",
            params:self.editData
          }).then(resp => {
            self.resetForm('editData');
            if (resp.success) {
              self.getSelectDeptList();
              self.$eventBus.$emit("refreshDept");
              self.$notify({
                title: '提示',
                message: "添加部门成功",
                type: 'success'
              });
            }
            this.count--;
          });
          this.count++;
        }
      },
      //关闭弹窗
      closeDialog() {
        this.$refs['editData'].clearValidate();
        this.$refs['editData'].resetFields();
        this.centerDialogVisible = false;
      },

      submitForm(formName) {
        let self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.operateAddDept();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].clearValidate();
        this.closeDialog();
      }
    },
    watch: {
      dataDetail(val) {
        this.count = 0;
        this.centerDialogVisible = true;
        this.editData = val;
      }
    }
  }
</script>
<style scoped>
  .editDept .el-dialog__body {
    padding: 0px 20px;
  }

  .editDept .el-form-item {
    margin-bottom: 18px;
  }


</style>
